﻿<template>
    <div id="app">
        <h-header :headertitle="title" :rightshow="1" :righttext1="right"></h-header>
        <div class="info" style="margin-top:-1px">
            <div style="padding-top:30px;width: 100%;height: 100px;text-align: center;">
                <div class="oa-contact-avatar">
                    <img :src="user.headimgurl" height="70px" width="70px" @click="updateheadimg" />

                </div>
            </div>
            <div style="font-family:'微软雅黑'; font-weight: 500;color: white;margin: 8px auto;text-align: center;"><span id="truename">{{user.truename}}</span></div>
            <Row style="margin-top:70px" v-if="usertype==1">
                <Col span="12" style="border-right:1px solid #e9e9e9">
                <div class="cell bigfont">学号</div>
                <div class="cell font-yellow">{{user.number}}</div>
                </Col>
                <Col span="12">
                <div class="cell bigfont">班级</div>
                <div class="cell font-yellow">{{user.classname}}</div>
                </Col>
            </Row>
        </div>
        <div class="split"></div>

        <div class="mui-content" style="background-color:#fff">
            <Row>
                <Col span="12" style="padding:10px;">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_01.png" width="50%;" @click="myinfo" />
                </Col>
                <Col span="16">
                <div class="bigfont" @click="myinfo">我的资料</div>
                <div class="smallfont">我的资料</div>
                </Col>
                </Col>

                <Col span="12" style="padding:10px;border-left:1px solid #e9e9e9;">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_02.png" width="50%" @click="mysign" />
                </Col>
                <Col span="16">
                <div class="bigfont" @click="mysign">签到记录</div>
                <div class="smallfont">累计30天记录</div>
                </Col>
                </Col>
            </Row>
            <Row>
                <Col span="12" style="padding:10px;border-top:1px solid #e9e9e9;">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_03.png" width="50%" @click="mymsg" />
                </Col>
                <Col span="16">
                <div class="bigfont" @click="mymsg">我的消息</div>
                <div class="smallfont">签到消息/系统消息</div>
                </Col>
                </Col>

                <Col span="12" style="padding:10px;border-left:1px solid #e9e9e9;border-top:1px solid #e9e9e9">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_04.png" width="50%" @click="food" />
                </Col>
                <Col span="16">
                <div class="bigfont" @click="food">历史菜谱</div>
                <div class="smallfont">立即进入</div>
                </Col>
                </Col>
            </Row>
            <!--<Row>
                <Col span="12" style="padding:10px;border-top:1px solid #e9e9e9;">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_05.png" width="50%" />
                </Col>
                <Col span="16">
                <div class="bigfont">我的班级</div>
                <div class="smallfont">班级管理</div>
                </Col>
                </Col>

                <Col span="12" style="padding:10px;border-left:1px solid #e9e9e9;border-top:1px solid #e9e9e9">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_06.png" width="50%" />
                </Col>
                <Col span="16">
                <div class="bigfont">安全中心</div>
                <div class="smallfont">隐私设置 安全升级</div>
                </Col>
                </Col>
            </Row>-->
            <Row>
                <Col span="12" style="padding:10px;border-top:1px solid #e9e9e9;">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_07.png" width="50%" @click="fankui" />
                </Col>
                <Col span="16">
                <div class="bigfont" @click="fankui">意见反馈</div>
                <div class="smallfont">我们会不断优化</div>
                </Col>
                </Col>

                <Col span="12" style="padding:10px;border-left:1px solid #e9e9e9;border-top:1px solid #e9e9e9">
                <Col span="8" style="text-align:center">
                <img src="../assets/images/icon_user_08.png" width="50%" />
                </Col>
                <Col span="16">
                <div class="bigfont"  @click="help">帮助中心</div>
                <div class="smallfont">联系客服</div>
                </Col>
                </Col>
            </Row>
            <div style="background-color:#efefef;padding-top:5px;padding-bottom:5px;">
                <Row style="margin-left:20px;margin-right:20px;" class="btninfo">
                    <Col span="8" style="line-height:50px;vertical-align:middle">
                    <p class="cell">到期时间</p>

                    </Col>
                    <Col span="16" style="height:50px;line-height:50px;vertical-align:middle;padding-left:10px;">

                    <img src="../assets/images/icon_clock.png" style="width:30px;vertical-align:middle;" /><span style="margin-left:10px;">{{user.endtime}}</span>
                    </Col>
                </Row>
                <Row style="margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;" class="btninfo">
                    <Col span="8" style="line-height:50px;vertical-align:middle">
                    <p class="cell">客服电话</p>

                    </Col>
                    <Col span="16" style="height:50px;line-height:50px;vertical-align:middle;padding-left:10px;" @click="help">
                    <img src="../assets/images/icon_tel.png" style="width:30px;vertical-align:middle;" /><span style="margin-left:10px;">{{user.kefuphone}}</span>
                    </Col>
                </Row>
            </div>
            <Row style="height:60px;background-color:#efefef">
                <div style="text-align:center">

                </div>
            </Row>

        </div>
    </div>

</template>

<script>

    import header from '../components/header.vue';
    import { Toast } from 'mint-ui';
    import Bus from '../bus.js';
    import wx from 'weixin-js-sdk'
    var images = {
        localIds: [],
        serverIds: []
    };


    export default {
        name: 'app',
        data() {
            return {
                right: '设置',
                title: '个人中心',
                items: ["123", "456"],
                user: {},
                usertype: "",
                headimgurl: ""
            }
        },
        
        mounted: function () {
            this.wxInit();
          
            window.onpopstate = () => {
                Bus.$emit('val', "show");
                //  this.$router.back();
            }
        },
        components: {
            'h-header': header,
        },
        methods: {
          
            wxInit: function () {
               
                var url = window.location.href.split('#')[0];

                this.$api.post('wx/Index/wxquanxian', {
                    "url": url
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);

                        var res = response.data;
                        wx.config({
                            debug: false, // 开启调试模式,
                            appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                            timestamp: res.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.nonceStr, // 必填，生成签名的随机串
                            signature: res.signature,// 必填，签名，见附录1
                            jsApiList: ['checkJsApi', 'chooseImage',
                                'previewImage', 'uploadImage', 'downloadImage','getLocalImgData']
                        });

                    } else {
                        //  console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            updateheadimg: function () {
                var _this = this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {

                        let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        var localId = localIds[0];
                        _this.user.headimgurl = localId;

                        wx.getLocalImgData({
                            localId: localId, // 图片的localID
                            success: function (res) {

                              
                                var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                var studentid = window.localStorage.getItem("studentid");
                                if(localData.indexOf('data:image') != 0) {
                                    //判断是否有这样的头部
                                    localData = 'data:image/jpeg;base64,' + localData
                                }
                                localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                              

                                _this.$api.post('wx/Index/uploadheadimg', {
                                    "data": localData,
                                    "studentid": studentid
                                }, response => {
                                    if (response.status >= 200 && response.status < 300) {
                                        // console.log(response.data);
                                        var data = response.data;
                                        if (data.status == 200) {
                                            


                                        } else {
                                            //Toast(data.message);
                                        }
                                    
                                    } else {
                                        console.log(response.message);
                                        //请求失败，response为失败信息
                                    }
                                });
                            }
                        });


                    },
                    cancel: function () {
                        alert("已取消选择");
                    }
                });

            },
           
            myinfo: function () {
                var usertype = window.localStorage.getItem("usertype");
                if (usertype == "1") {
                    Bus.$emit('val', "hide")
                    this.$router.push('/studentinfo');
                } else if (usertype == "2") {
                    Bus.$emit('val', "hide")
                    this.$router.push('/teacherinfo');
                }
            },
            mysign: function () {
                var usertype = window.localStorage.getItem("usertype");
                if (usertype == "1") {
                    Bus.$emit('val', "hide")
                    this.$router.push('/mysignlist');
                } else if (usertype == "2") {

                    Bus.$emit('tab', "3")
                }
            },
            mymsg: function () {
                Bus.$emit('tab', "4");
            },
            food: function () {
                Bus.$emit('val', "hide")
                this.$router.push({ name: "foodlist", params: { "tabindex": 5 }});
            },
            fankui: function () {
                Bus.$emit('val', "hide")
                this.$router.push({ name: "feedback", params: { } });
            },
            load: function () {

                var openid = window.localStorage.getItem("openid");
                console.log(openid);
                var _this = this;

                this.$api.post('wx/Index/myinfo', {
                    "openid": openid
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {
                            _this.user = data.data;


                        } else {
                            //Toast(data.message);
                        }
                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            help: function () {
                var phone = this.$data.user.kefuphone;
                window.location.href = "tel:" + phone;
            }
        },
        created() {
            var usertype = window.localStorage.getItem("usertype");
            this.$data.usertype = usertype
            this.load();
        }
    }
</script>

<style scoped>
    @import "../assets/css/mui.min.css";

    .info {
        background-image: url(../assets/images/bg_user.png);
        height: 240px;
        background-repeat: no-repeat;
        width: 100%;
        background-size: 100% 200px;
    }

    .cell {
        text-align: center
    }

    .split {
        height: 1em;
        background-color: #efefef;
    }

    .font-yellow {
        color: #feb43b;
    }

    .bigfont {
        font-size: 16px;
        font-weight: 200;
    }

    .smallfont {
        font-size: 12px;
        color: #cccccc
    }

    .btninfo {
        background-image: url('../assets/images/bg_info.png');
        background-repeat: no-repeat;
        background-size: 100%;
        height: 50px;
        border-radius: 5px;
    }
</style>